---
import Layout from '../../layouts/Layout.astro';
import ProductCard from '../../components/ProductCard.astro';
import { getProductsFromDB, getPriceDropsFromDB } from '../../lib/products';
import type { Sneaker } from '../../data/mock'; // Type-only import, no runtime dependency

const collectionMeta: Record<string, { title: string; description: string; emoji: string }> = {
  'sale': { title: 'Sale', description: 'De beste sneaker deals met meer dan 15% korting' },
  'trending': { title: 'Trending', description: 'De populairste sneakers van dit moment' },
  'new-arrivals': { title: 'Nieuw Binnen', description: 'De nieuwste sneakers, net toegevoegd' },
  'price-drops': { title: 'Prijsdalingen', description: 'Sneakers die recent in prijs zijn gedaald' },
  'bestsellers': { title: 'Bestsellers', description: 'De best verkochte sneakers' },
  'under-100': { title: 'Onder €100', description: 'Betaalbare sneakers onder de honderd euro' },
};

const { slug } = Astro.params;
const meta = collectionMeta[slug!] || { title: slug, description: '' };

let collectionProducts: Sneaker[] = [];
switch (slug) {
  case 'sale':
  case 'price-drops':
    collectionProducts = await getPriceDropsFromDB(24);
    break;
  case 'trending':
  case 'bestsellers':
    collectionProducts = await getProductsFromDB({ limit: 24, orderBy: 'popular' });
    break;
  case 'new-arrivals':
    collectionProducts = await getProductsFromDB({ limit: 24, orderBy: 'newest' });
    break;
  case 'under-100':
    collectionProducts = await getProductsFromDB({ limit: 24, orderBy: 'price_asc' });
    collectionProducts = collectionProducts.filter(s => s.lowestPrice < 100);
    break;
  default:
    collectionProducts = await getProductsFromDB({ limit: 24 });
}
---

<Layout title={`${meta.title} — SneakerPicks`} description={meta.description}>
  <section class="mx-auto max-w-7xl px-4 py-12 sm:px-6">
    <div class="mb-8">
      <h1 class="text-3xl font-black tracking-tight sm:text-4xl">
        <span>{meta.emoji}</span> {meta.title}
      </h1>
      <p class="mt-2 text-text-secondary">{meta.description}</p>
      <p class="mt-1 text-sm text-text-muted">{collectionProducts.length} sneakers</p>
    </div>

    <div class="grid grid-cols-2 gap-4 sm:gap-6 md:grid-cols-3 lg:grid-cols-4">
      {collectionProducts.map((sneaker, i) => (
        <ProductCard sneaker={sneaker} index={i} />
      ))}
    </div>

    {collectionProducts.length === 0 && (
      <div class="py-20 text-center">
        <p class="text-lg text-text-muted">Geen sneakers gevonden in deze collectie</p>
      </div>
    )}
  </section>
</Layout>